import React from 'react';
import DateSel from '../components/DateSel.js'
import '../../css/main.css';
import './firstPage.css'
import firstPage from '../imgs/firstPage.png'
class FirstPage extends React.Component {
    constructor(props){
		super(props)
		this.state={
			getModalStatus:false, //控制日期组件的显示和隐藏
			currentTimeText:'',
		  }
		this.openCurrentTime=this.openCurrentTime.bind(this);//绑定当前组件样式
		this.changeCurrentTime=this.changeCurrentTime.bind(this);

    }
    componentDidMount(){//dom结构已经挂载
      
	}
	componentWillMount(){//dom结构即将挂载
		this.changeCurrentTime()
	}
	changeCurrentTime(){
		var currentTime=new Date();
		var _year=currentTime.getFullYear();
		var _month=currentTime.getMonth();
		this.setState({
			currentTimeText:_year+'年'+_month+'月'
		   })  
	}
	openCurrentTime(){//打开日期选择器
		this.setState({
			getModalStatus:true
		   })  
	}
	getsonValue(year,month){//获取子元素传来的数值
		this.setState({
			getModalStatus:false
		   })  
		console.log(year,month);
		this.setState({
			currentTimeText:year+'年'+month+'月'
		   }) 
	}
    render(){
        return <div className="content_firstpage">
                    <div className="headerTitle">
							<img src={firstPage}  alt={firstPage} />
						</div>
						<input type="text" id="date" readOnly onClick={this.openCurrentTime} value={this.state.currentTimeText} />
						<div style={{display:this.state.getModalStatus?"block":"none"}}>
							<DateSel  getModalStatus={this.state.getModalStatus}  sonControllFather={this.getsonValue.bind(this)}/> 
                		</div>
						<div className="messageSource">
							<div>
								信息来源：益农信息社数据统计中心
							</div>
						</div>
						<div className="upSlide">
							<a href="#/secondPage" >下一页</a>
						</div>
               </div>
    }
}
export default FirstPage